<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:日志管理
* @fileName:Logs.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-6
!-->
<script setup lang="ts">
import { onMounted, reactive, getCurrentInstance } from "vue";
import LogSearch from "./components/log-search.vue";
import LogDetails from "./components/log-details.vue";
import LogPagination from "@/components/common/pagination.vue";
import { showErrorMessage } from "../../../common/message";
const { proxy } = getCurrentInstance() as any;

const listData = reactive({
  // 列表数据
  tableData: [],
  // 日志类型
  logEventData: [],
  // 列表总数
  total: 0,
  // 列表加载动画
  isListLoading: false,
  // 查询加载动画
  isSearchLoading: false,
});

/**
 * 定义请求数据
 */
let reqData = {
  nickName: "",
  beginTime: "",
  endTime: "",
  eventName: "",
  page: 1,
};

/**
 * 查询方法
 * @param filter 查询条件对象
 * @reture viod
 */
const searchFunc = (filter: any) => {
  listData.isSearchLoading = true;
  reqData.nickName = filter.nickName;
  reqData.beginTime = filter.beginTime;
  reqData.endTime = filter.endTime;
  reqData.eventName = filter.eventValue;
  reqTableList();
};

/**
 * 根据页码跳转页面
 * @param pageNumber 页码
 * @reture viod
 */
const getCurrentPageNumber = (pageNumber: number) => {
  reqData.page = pageNumber;
  reqTableList();
};

/**
 * 获取列表
 * @reture viod
 */
const reqTableList = () => {
  listData.isListLoading = true;
  const res = proxy.$HTTP.post({
    url: `/opr/query`,
    params: {
      page: reqData.page,
      size: 10,
    },
    data: {
      nickName: reqData.nickName,
      beginTime: reqData.beginTime,
      endTime: reqData.endTime,
      eventName: reqData.eventName,
    },
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        listData.tableData = res.data.records;
        listData.total = Number(res.data.total);
      }
      listData.isListLoading = false;
      listData.isSearchLoading = false;
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
      listData.isListLoading = false;
      listData.isSearchLoading = false;
    });
};

/**
 * 获取所有日志事件
 * @reture viod
 */
const reqEventDataList = () => {
  const res = proxy.$HTTP.get({
    url: `/opr/event`,
  });
  res
    .then((res: any) => {
      if (res.isOk) {
        listData.logEventData = res.data;
      }
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
    });
};

onMounted(() => {
  // 初始化加载树形结构
  reqTableList();
  // 获取所有日志事件
  reqEventDataList();
});
</script>

<template>
  <div class="page-list">
    <!-- 查询 -->
    <log-search
      :searchFunc="searchFunc"
      :eventData="listData.logEventData"
      :isSearchLoading="listData.isSearchLoading"
    ></log-search>
    <!-- 列表详情 -->
    <log-details
      :tableData="listData.tableData"
      :isListLoading="listData.isListLoading"
    ></log-details>
    <!-- 分页 -->
    <log-pagination
      :total="listData.total"
      :getCurrentPageNumber="getCurrentPageNumber"
    ></log-pagination>
  </div>
</template>

<style lang="scss" scoped>
.page-list {
  position: relative;
  background-color: #fff;
  padding: 15px;
  height: calc(100vh - 130px);
}
</style>
